<template>
  <!-- 添加或修改对话框 -->
  <div>
    <el-dialog title="选择资源素材" :visible.sync="dialogFormVisible" width="1000px" :close-on-click-modal="false">
      <div class="search-source">
        <el-input size="small" v-model="listQuery.materialName" clearable style="width: 240px;" placeholder="请输入标题" />
        <el-button size="small" type="primary" icon="el-icon-search" style="margin-left: 10px;" @click="searchClick">查找
        </el-button>
      </div>
      <div class="data-source">
        <div class="source-list">
          <div class="source-item" :class="activeIndex === index?'source-item-active':''"
            v-for="(item, index) in sourceList" :key="index" @click="chooseIt(item, index)">
            <video class="source-video" :src="item.materialUrl" :id="`video${index}`" controls="controls"></video>
            <div class="source-title">{{item.materialName}}</div>
            <img v-if="activeIndex === index" class="choose-img"
              src="" />
            <span @click.stop>
              <span class="del" @click="delClick(item)">
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
          <div class="source-item">
            <upload-img v-model="sourceObj" shop-type="one" :width="800" :height="800">
              <div class="one-img-upload">
                <i class="el-icon-plus avatar-uploader-icon" style="font-size: 40px;"></i>
              </div>
            </upload-img>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogFormVisible = false">取消</el-button>
        <el-button size="mini" type="primary" @click="submitForm">确定选择</el-button>
      </div>
    </el-dialog>
    <el-dialog title="确认视频数据" :visible.sync="dialogVisible" width="500px" :close-on-click-modal="false">
      <div class="source-content" style="margin: -20px 0;">
        <video class="source-video" style="width: 460px;height: 256px;background-color: #000000;" :src="sourceObj.url"
          controls="controls"></video>
        <div class="source-title">
          <el-input style="margin-top: 5px;" placeholder="视频标题" v-model="sourceObj.name"></el-input>
          <div style="color: red;margin-top: 5px;">（请您填写视频名称）</div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible = false">取消</el-button>
        <el-button size="mini" type="primary" @click="submitUpload">确定上传</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import uploadImg from '@/components/upLoad/UploadImg.vue'
  import {
    materialadd,
    materiallist,
    materialdelete
  } from '@/api/ad.js'
  export default {
    components: {
      uploadImg
    },
    data() {
      return {
        dialogFormVisible: false,
        dialogVisible: false,
        activeIndex: -1,
        sourceObj: {},
        listQuery: {
          page: 1,
          limit: 100000,
          needPaging: false
        },
        sourceList: [],
        selectObj: {}
      }
    },
    watch: {
      sourceObj() {
        this.dialogVisible = true
      }
    },
    methods: {
      submitUpload() {
        let data = {
          materialType: 0,
          materialUrl: this.sourceObj.url,
          materialName: this.sourceObj.name
        }
        materialadd(data).then(response => {
            console.log(response)
            if (response.data.code === 200) {
              this.$notify.success({
                title: '提示',
                message: '添加成功'
              })
              this.materiallist()
              this.dialogVisible = false
            }
          })
          .catch(() => {})
      },
      materiallist() {
        if (this.listQuery.materialName === '' || this.listQuery.materialName === ' ') {
          this.listQuery.materialName = undefined
        }
        materiallist(this.listQuery).then(response => {
            this.sourceList = response.data.data.data
          })
          .catch(() => {})
      },
      delClick(item) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          materialdelete(item).then(response => {
            console.log(response)
            if (response.data.code === 200) {
              this.$notify.success({
                title: '提示',
                message: '删除成功'
              })
              this.materiallist()
            }
          })
          .catch(() => {})
        }).catch(() => {})
      },
      searchClick() {
        this.materiallist()
      },
      submitForm() {
        this.$emit('submitForm', this.selectObj)
      },
      chooseIt(item, index) {
        this.activeIndex = index
        this.videoContext = document.getElementById(`video${index}`)
        this.selectObj = {
          ...this.selectObj,
          ...item,
          totalDuration: this.videoContext.duration
        }
      },
      open(data) {
        this.selectObj = {
          ...data
        }
        this.dialogFormVisible = true
        this.materiallist()
      },
      close() {
        this.dialogFormVisible = false
      }
    }
  }
</script>

<style lang="scss" scoped>
  .search-source {
    display: flex;
    align-items: center;
    height: 50px;
    margin-top: -30px;
  }

  .data-source {
    height: 500px;
    border: 1px solid #DCDFE6;
    padding: 5px;
    overflow: auto;
    margin-bottom: -20px;

    .source-list {
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      .source-item {
        width: 32.2%;
        cursor: pointer;
        height: 260px;
        border: 2px solid rgba(0, 0, 0, 0.1);
        margin: 5px;
        overflow: hidden;
        border-radius: 6px;
        box-shadow: 0px 1px 5px 3px rgba(0, 0, 0, 0.1);
        position: relative;

        .source-video {
          width: 100%;
          height: 167px;
          background-color: #000000;
        }

        .source-title {
          font-size: 18px;
          font-weight: bold;
          line-height: 24px;
          margin-top: 15px;
          color: #1679FB;
          height: 80px;
          text-align: center;
          padding: 0 20px;
        }

        .choose-img {
          position: absolute;
          bottom: 0;
          right: 0;
        }

        .del {
          display: none;
        }
      }

      .source-item:hover {
        .del {
          display: block;
          position: absolute;
          top: 5px;
          right: 5px;
          color: red;
          padding: 10px;
          background-color: white;
          border-radius: 100%;
        }
      }

      .source-item-active {
        border: 2px solid #C40000;
        box-shadow: 0px 1px 5px 3px #f26a6a70;
      }
    }
  }
</style>

<style lang="scss" scoped>
  .one-img-upload {
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    box-sizing: border-box;
    width: 100%;
    height: 256px;
    font-size: 20px;
    padding: 10px;
    cursor: pointer;
    vertical-align: top;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: 100%;
      height: 100%;
    }

    span {
      display: none;
    }

    &:hover {
      span {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        color: #09f;
        font-size: 20px;
      }
    }
  }
</style>
